<template>
	<view class="gift-container">


		<swiper style="height: 500rpx;" :indicator-dots="true" :autoplay="false" :interval="3000" :duration="1000">
			<swiper-item v-for="(items,indexs) in list " :key="indexs">
				<view class="swiper-item">
					<view class="item">
						<view class="list" v-for="(item,index) in items" :key="index" @click="sendGift(item)">
							<image class="gift-img" :src="URL(item.image)" mode="widthFix">
							</image>
							<view class="name">{{item.name}}</view>
							<view class="info">
								<image class="icon-img" src="https://xbb.fuliaoxx.com/img/images/start3.png" mode="widthFix"></image>
								{{item.diamond}}
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<view class="footer" @click="to('/pages/my/wallet')">
			<view class="money">
				<image class="icon-img" src="https://xbb.fuliaoxx.com/img/images/start3.png" mode="widthFix"></image>
				{{userInfo.diamond}}
			</view>
			<view class="money">
				<image class="icon-img" src="https://xbb.fuliaoxx.com/img/images/user-icon2.png" mode="widthFix"></image>
				{{userInfo.gold}}
			</view>

			<view class="pay">
				充值
			</view>
		</view>
		<view class="footFix"></view>
	</view>
</template>
<script>
	import {
		TUIChatService,
	} from "@tencentcloud/chat-uikit-engine";
	// import upImg from '@/static/gift/f1.png'
	import { getCurrentInstance } from "vue";
	export default {
		data() {
			return {
				list: [
				],
			}
		},
		mounted(){
			this.loadData()
		},
		methods: {
			async loadData(){
				const {data:{data,code}}=await this.$API.giftList()
				for(let i=0;i<=data.length;i+=8){
					this.list.push(data.slice(i,i+8))
				}
				// for(let i=0;i<=data.length;i+=1){
				// 	uni.request({url: 'http://bbchatuser.oss-cn-beijing.aliyuncs.com' + data[i].file})
				// 	// uni.request({url:this.URL( data[i].file)})
				// }
				
			},
			async sendGift(item) {
				this.user.sendGift(item)
			}
		}
	}
</script>
<style lang="scss" scoped>
	.gift-container {
		width: 750rpx;
		display: flex;
		position: relative;
		left: -20rpx;
		flex-direction: column;
		background: white;
		padding: 20rpx;
		box-sizing: border-box;
		height: 600rpx;
	}

	.gift-img {
		width: 135rpx;
		height: 135rpx;
	}

	.icon-img {
		width: 30rpx;
	}

	.info {
		font-size: 20rpx;
		color: #bfbfbd;
		display: flex;
		justify-content: center;
		margin-top: 5rpx;
	}

	.name {
		font-weight: bold;
		font-size: 26rpx;
		text-align: center;
	}

	.item {
		display: flex;
		flex-wrap: wrap;
	}

	.list {
		width: 25%;
		text-align: center;
		margin-bottom: 10rpx;
	}

	.footer {
		display: flex;

		.money,
		.pay {
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 40rpx;
				margin-right: 5rpx;
			}

			margin-right: 30rpx;
		}

		.pay {
			border: 3rpx solid #d86ba3;
			color: #d86ba3;
			border-radius: 20px;
			font-size: 24rpx;
			padding: 3px 15rpx;
		}
	}

	.footFix {
		width: 100%;
		height: 22rpx;
		position: absolute;
		bottom: -22rpx;
		background: white;
	}
</style>